<!DOCTYPE html>
<html>
<head>
<style>
.edx-input {
  width: 200px;
}
</style>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src="//edge.edx.org/c4x/MITx/6.MITx/asset/jschannel.js"></script>
<script type="text/javascript">
var edx_demo = (function () {
    var input_field;   // example interaction: a single input field

    // return JSON representation to be used by server-side grader
    function getGrade() {
        // example: return value of input field
        var grade = {};
        if (input_field) grade.value = input_field.val();
        return JSON.stringify(grade);
    }

    // return JSON representation of persistent state
    function getState() {
        // example: return value of input field
        var state = {};
        if (input_field) state.value = input_field.val();
        return JSON.stringify(state);
    }

    // process incoming state from jsinput framework
    // This function will be called with 1 argument when JSChannel is not used,
    // 2 otherwise. In the latter case, the first argument is a transaction 
    // object that will not be used here (see http://mozilla.github.io/jschannel/docs/)
    function setState() {
        var stateStr = arguments.length === 1 ? arguments[0] : arguments[1];
        // jsinput gets anxious if we don't respond quickly, so come back to
        // initialization after we've returned and made jsinput happy.
        setTimeout(function () { initialize(JSON.parse(stateStr)); },1);
    }

    // use provided state object to initialize demo state.  If state is undefined,
    // perform default initialization
    function initialize(state) {
        if (input_field) input_field.val(state.value);
    }

    // set up editor inside of div's with class "jade"
    function setup() {
        // Establish a channel only if this application is embedded in an iframe.
        // This will let the parent window communicate with this application using
        // RPC and bypass SOP restrictions.
        if (window.parent !== window) {
            channel = Channel.build({
                window: window.parent,
                origin: "*",
                scope: "JSInput"
            });

            channel.bind("getGrade", getGrade);
            channel.bind("getState", getState);
            channel.bind("setState", setState);
        }

        // look for nodes of class edx_demo and set them up
        $('.edx_demo').each(function(index, div) {
            $(div).empty();    // start with a clean slate

            // example: a simple input field
            input_field = $('<input type="text" class="edx-input"></input>');
            $(div).append('Please enter a number: ',input_field);
        });
    }

    //////////////////////////////////////////////////////////////////////
    //
    // Module exports
    //
    //////////////////////////////////////////////////////////////////////

    return {
        setup: setup,   // called to initialize jade editors on this page

        // communication to/from edX jsinput framework
        getState: getState,
        setState: setState,
        getGrade: getGrade
    };

}());

// set up any demo DIVs
$(document).ready(edx_demo.setup);
</script>

</head>
<body>
<div class="edx_demo"></div>
</body>
</html>
